<nav class="navbar navbar-default navbar-fixed-top unselectable hidden-print">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <div class="pull-right" style="margin-top: 17px; color: #777;">
            <div class="visible-xs">&nbsp;</div>
            <div class="visible-sm">&nbsp;</div>
            <div class="visible-md">&nbsp;</div>
            <div class="visible-lg">&nbsp;</div>
        </div>
        <div class="nav-mobile nav-status visible-xs" id="short-online-user-list">
            <a class="ui-short-status" data-toggle="dropdown"><span class="label label-danger"><i class="fa fa-plug"></i> </span>
            </a>
            <ul class="dropdown-menu list" role="menu" aria-labelledby="menu">
            </ul>
        </div>
        <a class="navbar-brand pull-left header-brand" href="<%- serverURL %>/" title="HedgeDoc">
            <img src="<%- serverURL %>/banner/banner_h_bw.svg" alt="HedgeDoc" class="h-100 no-night">
            <img src="<%- serverURL %>/banner/banner_h_wb.svg" alt="HedgeDoc" class="h-100 night">
        </a>
        <div class="nav-mobile pull-right visible-xs">
            <a data-toggle="dropdown" class="btn btn-link">
                <i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu list" role="menu" aria-labelledby="menu">
                <li role="presentation"><a role="menuitem" class="ui-new" tabindex="-1" href="<%- serverURL %>/new" target="_blank" rel="noopener"><i class="fa fa-plus fa-fw"></i> <%= __('New') %></a>
                </li>
                <li role="presentation"><a role="menuitem" class="ui-publish" tabindex="-1" href="#" target="_blank" rel="noopener"><i class="fa fa-share-square-o fa-fw"></i> <%= __('Publish') %></a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header"><%= __('Extra') %></li>
                <li role="presentation"><a role="menuitem" class="ui-extra-revision" tabindex="-1" data-toggle="modal" data-target="#revisionModal"><i class="fa fa-history fa-fw"></i> <%= __('Revision') %></a>
                </li>
                <li role="presentation"><a role="menuitem" class="ui-extra-slide" tabindex="-1" href="#" target="_blank" rel="noopener"><i class="fa fa-tv fa-fw"></i> <%= __('Slide Mode') %></a>
                </li>
                <% if(enableGitHubGist || enableDropBoxSave || enableGitlabSnippets) { %>
                <li class="divider"></li>
                <li class="dropdown-header"><%= __('Export') %></li>
                <li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                </li>
                <% if(enableGitHubGist) { %>
                <li role="presentation"><a role="menuitem" class="ui-save-gist" tabindex="-1" href="#" target="_blank" rel="noopener"><i class="fa fa-github fa-fw"></i> Gist</a>
                </li>
                <% } %>
                <% if(enableGitlabSnippets) { %>
                <li role="presentation"><a role="menuitem" class="ui-save-snippet" href="#"><i class="fa fa-gitlab fa-fw"></i> Snippet</a>
                </li>
                <% } %>
                <% } %>
                <li class="divider"></li>
                <li class="dropdown-header"><%= __('Import') %></li>
                <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                </li>
                <li role="presentation"><a role="menuitem" class="ui-import-gist" href="#" data-toggle="modal" data-target="#gistImportModal"><i class="fa fa-github fa-fw"></i> Gist</a>
                </li>
                <% if(enableGitlabSnippets) { %>
                <li role="presentation"><a role="menuitem" class="ui-import-snippet" href="#"><i class="fa fa-gitlab fa-fw"></i> Snippet</a>
                </li>
                <% } %>
                <li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> <%= __('Clipboard') %></a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header"><%= __('Download') %></li>
                <li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
                </li>
                <li role="presentation"><a role="menuitem" class="ui-download-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> HTML</a>
                </li>
                <li role="presentation"><a role="menuitem" class="ui-download-raw-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> <%= __('Raw HTML') %></a>
                </li>
                <li class="divider"></li>
                <li role="presentation"><a role="menuitem" class="ui-help" href="#" data-toggle="modal" data-target=".help-modal"><i class="fa fa-question-circle fa-fw"></i> Help</a>
                </li>
            </ul>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn ui-night" title="<%= __('Night Theme') %>">
                    <input type="checkbox" name="night"><i class="fa fa-moon-o"></i>
                </label>
            </div>
            <a class="btn btn-link ui-mode">
                <i class="fa fa-pencil"></i>
            </a>
        </div>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-form navbar-left" style="padding:0;">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default ui-view" for="view-mode-toggle-view" title="<%= __('View') %> (Ctrl+Alt+V)" aria-label="<%= __('View') %> (Ctrl+Alt+V)">
                    <input type="radio" name="mode" id="view-mode-toggle-view" autocomplete="off"><i class="fa fa-eye"></i>
                </label>
                <label class="btn btn-default ui-both" for="view-mode-toggle-both" title="<%= __('Both') %> (Ctrl+Alt+B)" aria-label="<%= __('Both') %> (Ctrl+Alt+B)">
                    <input type="radio" name="mode" id="view-mode-toggle-both" autocomplete="off"><i class="fa fa-columns"></i>
                </label>
                <label class="btn btn-default ui-edit" for="view-mode-toggle-edit" title="<%= __('Edit') %> (Ctrl+Alt+E)" aria-label="<%= __('Edit') %> (Ctrl+Alt+E)">
                    <input type="radio" name="mode" id="view-mode-toggle-edit" autocomplete="off"><i class="fa fa-pencil"></i>
                </label>
            </div>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn ui-night" title="<%= __('Night Theme') %>">
                    <input type="checkbox" name="night"><i class="fa fa-moon-o"></i>
                </label>
            </div>
            <span class="btn btn-link btn-file ui-help" title="<%= __('Help') %>" data-toggle="modal" data-target=".help-modal">
                <i class="fa fa-question-circle"></i>
            </span>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li id="online-user-list">
                <a class="ui-status" data-toggle="dropdown">
                    <span class="label label-danger"><i class="fa fa-plug"></i> OFFLINE</span>
                </a>
                <ul class="dropdown-menu list" role="menu" aria-labelledby="menu" style="right: 15px;width: 200px;">
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right" style="padding:0;">
            <li>
                <a href="<%- serverURL %>/new" target="_blank" rel="noopener" class="ui-new">
                    <i class="fa fa-plus"></i> <%= __('New') %>
                </a>
            </li>
            <li>
                <a href="#" target="_blank" rel="noopener" class="ui-publish">
                    <i class="fa fa-share-square-o"></i> <%= __('Publish') %>
                </a>
            </li>
            <li>
                <a data-toggle="dropdown">
                    <%= __('Menu') %> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu list" role="menu" aria-labelledby="menu">
                    <li class="dropdown-header"><%= __('Extra') %></li>
                    <li role="presentation"><a role="menuitem" class="ui-extra-revision" tabindex="-1" data-toggle="modal" data-target="#revisionModal"><i class="fa fa-history fa-fw"></i> <%= __('Revision') %></a>
                    </li>
                    <li role="presentation"><a role="menuitem" class="ui-extra-slide" tabindex="-1" href="#" target="_blank" rel="noopener"><i class="fa fa-tv fa-fw"></i> <%= __('Slide Mode') %></a>
                    </li>
                    <% if(enableGitHubGist || enableDropBoxSave || enableGitlabSnippets) { %>
                    <li class="divider"></li>
                    <li class="dropdown-header"><%= __('Export') %></li>
                    <li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                    </li>
                    <% if(enableGitHubGist) { %>
                    <li role="presentation"><a role="menuitem" class="ui-save-gist" tabindex="-1" href="#" target="_blank" rel="noopener"><i class="fa fa-github fa-fw"></i> Gist</a>
                    </li>
                    <% } %>
                    <% if(enableGitlabSnippets) { %>
                    <li role="presentation"><a role="menuitem" class="ui-save-snippet" href="#"><i class="fa fa-gitlab fa-fw"></i> Snippet</a>
                    </li>
                    <% } %>
                    <% } %>
                    <li class="divider"></li>
                    <li class="dropdown-header"><%= __('Import') %></li>
                    <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                    </li>
                    <li role="presentation"><a role="menuitem" class="ui-import-gist" href="#" data-toggle="modal" data-target="#gistImportModal"><i class="fa fa-github fa-fw"></i> Gist</a>
                    </li>
                    <% if(enableGitlabSnippets) { %>
                    <li role="presentation"><a role="menuitem" class="ui-import-snippet" href="#"><i class="fa fa-gitlab fa-fw"></i> Snippet</a>
                    </li>
                    <% } %>
                    <li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> <%= __('Clipboard') %></a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header"><%= __('Download') %></li>
                    <li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
                    </li>
                    <li role="presentation"><a role="menuitem" class="ui-download-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> HTML</a>
                    </li>
                    <li role="presentation"><a role="menuitem" class="ui-download-raw-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> <%= __('Raw HTML') %></a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<div class="ui-spinner unselectable hidden-print"></div>
